<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-form :model="sshConfig" label-width="80px">
          <el-form-item label="账号">
            <el-input v-model="sshConfig.user"></el-input>
          </el-form-item>
          <el-form-item label="IP">
            <el-input v-model="sshConfig.host"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="sshConfig.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-aside>
      <el-main>
        <el-tabs v-model="activeTabId" type="border-card" closable @tab-remove="removeTab">
          <el-tab-pane v-for="(item, index) in tabs" :key="index" :name="item.businessId" :label="item.label">
            <ssh-terminal :sshConfig="item"></ssh-terminal>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
const { v4: uuidv4 } = require('uuid')
import SshTerminal from "@/components/SshTerminal";

export default {
  name: "SshTerminals",
  // eslint-disable-next-line vue/no-unused-components
  components: { SshTerminal },
  data: function () {
    return {
      sshConfig: {user: "", host: "", password: ""},
      tabs: [],
      activeTabId: ""
    }
  },
  methods: {
    removeTab: function (businessId) {
      this.tabs = this.tabs.filter(value => value.businessId !== businessId)
      if (this.activeTabId === businessId && this.tabs.length > 0) {
        this.activeTabId = this.tabs[0].businessId
      }
    },
    login: function () {
      let me = this;
      let tab = {
        businessId: uuidv4(),
        user: me.sshConfig.user,
        host: me.sshConfig.host,
        password: me.sshConfig.password,
        label: me.sshConfig.host,
      }
      me.tabs.push(tab);
      me.activeTabId = tab.businessId;
    },
    reset: function () {
      this.sshConfig.user = "";
      this.sshConfig.host = "";
      this.sshConfig.password = "";
    }
  }
}
</script>

<style scoped>

</style>